<template>
	<view class="content commonPop">
		<u-popup :show="isAdd" mode="bottom">
			<view class="purchaseBox">
				<view class="baseTop">
					<text>领用配件</text>
					<view class="closeBox" @click="isAdd = false">
						<image src="../static/closeBtn.png" mode=""></image>
					</view>
				</view>
				
				<view class="confirmBox">
					<!-- <view class="conwrap">
						<input type="text" placeholder="请输入数量" />
						<view class="confirmQty">
							该配件总量为：100件
						</view>
					</view> -->
					<view class="beiTable">
						<view class="beiHead">
							<text>序号</text>
							<text>材料名称</text>
							<text>规格</text>
							<text>小计</text>
						</view>
						
						<view class="beiBody" v-for="(item,index) in listData" :key="index">
							<text>{{index + 1}}</text>
							<text>{{item.partsName}}</text>
							<text>{{item.specification}}</text>
							<text>{{item.number}}</text>
						</view>
					</view>
					
					<!-- <view class="confirmBottom">
						<text>取消</text>
						<text class="btn2">确认</text>
					</view> -->
					<view class="xunBottomBox" @click="confirmOrderInfo">
						<text>确认领取</text>
					</view>	
				</view>
				
			</view>	
		</u-popup>
		
	</view>
</template>

<script>
	import { applyPartsInfo } from '@/api/login.js';
	export default {
		name:"confirmPart",
		data() {
			return {
				isAdd: false,
				orderId: '',
				listData: []
			}
		},
		methods:{
			confirmOrderInfo(){
				let newArr = [];
				this.listData.forEach(item=>{
					let objj = {
						 inventoryPartId: item.id,
						 quantityUsed: item.number,
					}
					newArr.push(objj)
				});
				applyPartsInfo(this.orderId,JSON.stringify(newArr)).then(res=>{
					if(res.code == 200) {
						uni.$u.toast('操作成功!');
						this.$emit('closeConfirm');
						this.isAdd = false;
					} else {
						uni.$u.toast(res.msg);
					}
				});	
			},
			showInfo(val,id){
				this.listData = val;
				this.orderId = id;
				this.isAdd = true;
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	.purchaseBox{
		background: #ffff;border-radius: 32rpx 32rpx 0px 0px;min-height:60vh;
		.xunBottomBox{
			height: 180rpx;background: #FFFFFF;@include flx;justify-content: space-between;position: fixed;bottom:0;left:0;
			box-shadow: 0px -4rpx 16rpx 0px rgba(0,0,0,0.04), 0px 0px 24rpx -8rpx rgba(0,0,0,0.03);width:100%;z-index:999;
			text{
				display: block;width: 100%;height: 80rpx;background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);
				text-align: center;border-radius: 40rpx;@include baseFont(30rpx,#fff,80rpx);font-weight:500;
				margin:18rpx 26rpx 0;
			}
		}
		.baseTop{
			@include baseFont(36rpx,#333,134rpx);font-weight: 500;text-align: center;
			.closeBox{
				position: absolute;right:38rpx;top:52rpx;
				image{
					display: block;width:24rpx;height:24rpx;
				}
			}
		}
		.confirmBox{
			padding:0 36rpx 0 38rpx;
			.beiTable{
				.beiHead{
					@include flx;background-color: #F0F0F0;box-shadow: inset 0px -2rpx 0px 0px #F0F0F0;
					justify-content: space-around;
					text{
						display: block;@include baseFont(26rpx,#333,88rpx);
					}
				}
				.beiBody{
					@include flx;justify-content: space-around;
					text{
						display: block;@include baseFont(26rpx,#333,96rpx);
					}
				}
			}
			.conwrap{
				padding:0 34rpx 0 32rpx;
				input{
					display: block;background: #F5F5F5;height:68rpx;border-radius:8rpx;
					@include baseFont(30rpx,#333,68rpx);padding:0 20rpx;
				}
				.confirmQty{
					@include baseFont(28rpx,#333,44rpx);
					margin:16rpx 0 92rpx;
				}
			}
			
			.confirmBottom{
				@include flx;padding:0 22rpx 0 24rpx;justify-content: space-between;
				text{
					display: block;width: 336rpx;text-align: center;border-radius: 40rpx;
					height: 80rpx;background: #EFEFF1;@include baseFont(30rpx,#17181B,80rpx);
				}
				.btn1{
					
				}
				.btn2{
					background: linear-gradient( 90deg, #588FFF 0%, #3671E9 100%);font-weight:500;color:#fff;
				}
			}
		}
	}	
}
</style>